<template>
	<div id='change-goods-size' class="wrapper">
		<div class="content">
			<el-row :gutter='15' style='padding:20px 0 10px 0;border-bottom:1px solid #eee;'>
				<el-col :span='7'>
					<img :src="guige.goods.goodsMainPhoto" height="80" width="80" alt="goods">
				</el-col>
				<el-col :span='14'>
					<p style='color:red;font-size:16px;'>￥{{handleMoney(nowSize.price)}}</p>
					<p style='padding:12px 0 4px 0;'>库存： {{nowSize.inventory}}</p>
					<p>已选： 
						<template v-if='nowSize.sGoodsspecpropertyListJson'>
							<span style='font-size:15px;color:#999;' v-for="(zhi,index) in JSON.parse(nowSize.sGoodsspecpropertyListJson)">
								<span v-for="(guige,key) in zhi" :key='key'>
									{{guige}}
								</span>
							</span>
						</template>
					</p>
				</el-col>
			</el-row>
			<div style='padding:20px 0;border-bottom:1px solid #eee;' v-for="(val,index) in guigeArr" :key='index'>
				<p style='font-size:16px;padding-bottom:20px;'>{{val.title}}</p>
				<div class='size'>
					<div :class="{'animated':true,'no':!guigeInfo.status}"  v-for="(guigeInfo,index1) in val.info" :key='index1' @click="changeGoodsSize(val.title,guigeInfo.info,guigeInfo.status,$event)">
						{{guigeInfo.info}}
					</div>
				</div>
			</div>
			<div style='padding:20px 0;border-bottom:1px solid #eee;height:30px;'>
				<el-row >
			    	<el-col :span='12' style='line-height:30px;font-size:16px;'>数量</el-col>
					<el-col :span='12'>
						<el-row>
							<el-col :span='6' class='change-count' style='background:red;'>
								<div @click='reduce' class='animated' ref='reduce' style='background:white'>—</div>
							</el-col>
							<el-col :span='12' class='change-count' style='border-right:none;border-left:none;' >
								<div ref='count' class='animated'>
									{{count}}
								</div>
							</el-col>
							<el-col :span='6' class='change-count' style='background:red;'>
								<div @click='increase' class='animated' ref='increase' style='background:white'>+</div>	
							</el-col>
						</el-row>
					</el-col>
			    </el-row>
			</div>
			<div style='height:20px;'></div>
		</div>
	</div>
</template>

<script>
    import BScroll from 'better-scroll';
    import {_money,_jsonEqual,_arrEqual} from '@/comm.js';
	export default {
		props:['guige'],
		data(){
			return ({
				nowSize:{},        //当前选择的尺寸
				finalSubmit:[],    //最终发送的规格对象
				offGuige:false,    //控制规格显示完没得
				sendGuige:{},      //过渡的规格对象
				guigeArr:[],       //规格json
				count:1,           //数量
			});
		},
		created(){
			this.guigeJson();
		},
		methods:{
			//格式化规格json
			guigeJson(){
				let arr=[];
				if(!this.guige.specproperties) return ;
				this.nowSize=JSON.parse(JSON.stringify(this.guige.specproperties[0]));
				this.nowSize.sGoodsspecpropertyListJson=null;
				this.guige.specproperties.forEach(function(val){
					if(arr.length){
						let guigeInfo=JSON.parse(val.sGoodsspecpropertyListJson);
						guigeInfo.forEach(function(val1){
							for(let key in val1){
								for(let i=0;i<arr.length;i++){
									if(key==arr[i].title){
										let off=false;
										for(let j=0;j<arr[i].info.length;j++){
											if(val1[key]==arr[i].info[j].info){
												off=true;
												break ;
											}
										}
										!off?arr[i].info.push({info:val1[key],status:true}):'';
									}
								}
							}
						});
					}else{
						let guigeInfo=JSON.parse(val.sGoodsspecpropertyListJson);
						guigeInfo.forEach(function(val1){
							for(let key in val1){
								arr.push({
									title:key,
									info:[{info:val1[key],status:true}]
								});
							}
						});
					}
				});
				this.guigeArr=arr;
			},
			//增加
			increase(){
				this.animated('increase');
				this.count++;
				this.$emit('changeGoodsSize','count',this.count);
			},
			//减少
			reduce(){
				if(this.count>0){
					this.animated('reduce');
					this.count--;
				    this.$emit('changeGoodsSize','count',this.count);
				}
			},
			animated(elAni){
				let elCount=this.$refs.count;
				let el=this.$refs[elAni];
				$(el).addClass('bounceIn');
			    $(elCount).addClass('rotateIn');
				setTimeout(function(){
					$(el).removeClass('bounceIn');
				    $(elCount).removeClass('rotateIn');
				},500);
			},
			//处理钱
			handleMoney(val){
				return _money(val);
			},
			//选择规格
			changeGoodsSize(type,val,status,ev){
				if(!ev._constructed) return ;
				let el=$(ev.target);
				el.addClass('active bounceIn').siblings().removeClass('active');
				setTimeout(function(){
					el.removeClass('bounceIn');
				},500);
				this.sendGuige[type]=val;
				let i=0;
				for(let key in this.sendGuige)i++;
				if(i==this.guigeArr.length){
					this.finalSubmit=[];
					for(let key in this.sendGuige){
						let obj={};
						obj[key]=this.sendGuige[key];
						this.finalSubmit.push(obj);
					}
					this.HandleOffGuige();
				}
			},
			HandleOffGuige(){
				let arr=this.finalSubmit;
				let send={};
				for(let val of this.guige.specproperties){
					let guigeInfo=JSON.parse(val.sGoodsspecpropertyListJson);
					let control=false;
					for(let arrval of arr){
						let off=false;
						for(let guigeval of guigeInfo){
							if(JSON.stringify(arrval)==JSON.stringify(guigeval)){
								off=true;
								break;
							}
						}
						if(!off){
							control=true;
							break;
						} 
					}
					if(!control){
						send=val;
						break ;
					}
				}
				this.nowSize=send;
				this.$emit('changeGoodsSize','guige',send);
			}
		},
		mounted(){
			let This=this;
			setTimeout(function(){
				new BScroll('.wrapper',{click:true});
			},300);
		},
		
	}
</script>

<style scoped>
	.animated {
	  animation-duration: .4s;
	  animation-fill-mode: both;
	}
	#change-goods-size{
		position: fixed;
		height:350px;
		overflow-x: hidden;
		overflow-y: auto;
		z-index:300;
		bottom: 50px;
		left:0;
		right: 0;
		padding:18px;
		background: white;
	}
	.size::after{
		content:'';
		display:block;
		clear:both;
	}
	.size > div{
		float:left;
		margin-right: 20px;
		padding:10px 18px;
		border:1px solid #eee;
		border-radius:5px;
	}
	.size > .no{
		background: #eee;
		color:blue;
	}
	.change-count{
		height:100%;
		line-height:30px;
		text-align:center;
		border:1px solid #eee;
	}
	.size .active{
		border:1px solid red;
		color:red;
	}
</style>